<template>
  <div class="map">
    <!-- 初始化echarts -->
    <div class="center" align='center' ref='mapbox' style="height:750px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js' //import中国地图 
import jsonp from 'jsonp'


 // 使用地图需要先注册
const option = {
  //1.标题组件
  title: {//标题组件，包含主标题和副标题
    text: "国内疫情",//主标题文本
    subtext: '累计确诊病例数，包含治愈、死亡',//副标题文本
    x: 'center',
    textStyle: {
      //fontWeight: 'bolder',
      fontSize: 24,
      color: 'black'
    },
    subtextStyle: {
      fontSize: 18,
    }
    //textAlign: 'left'
  },

  //2.视觉映射组件
  visualMap: [{//是视觉映射组件
    type: 'piecewise',//分段型视觉映射组件
    show: true,
    pieces: [//自定义
      //图例
      {min: 10000},
      {min: 1000, max: 9999},
      {min: 100, max: 999},
      {min: 10, max: 99},
      {min: 1, max: 9},
      {value: 0, color: 'lightgray'}
      ],
      //align: 'right',
      //orient: 'horizontal'
      //showLabel: false
      inRange: {//定义 在选中范围中 的视觉元素
        symbol: 'circle',
        // symbolSize: ,
        color: ['#ffc0b1', '#9c0505']
      },
      itemWidth: 20,//图形的宽度，即每个小块的宽度
      itemHeight: 10//图形的高度，即每个小块的高度。
  }],
  
  //3.提示框组件
  tooltip: {//提示框组件。
    trigger: 'item' //提示框触发类型
  },

  //4.工具栏
  toolbox: {//工具栏
    show: true,
    //orient: 'vertical',
    itemSize: 25,//工具栏 icon 的大小
    itemGap: 20,//工具栏 icon 每项之间的间隔
    feature: {//各工具配置项
      dataView: {readOnly: true},//是否显示数据试图
      saveAsImage: { //保存为图片
        name: "国内疫情地图"
      }
    }
  },

  //5.系列列表.每个系列通过 type 决定自己的图表类型
  series: [{
    name: "确诊人数",
    type: 'map' , //echats要渲染的是地图类型
    map: 'china', //渲染中国地图
    label: {
      //控制对应地区的汉字
      show: false,
      color: 'black', //控制地区字体颜色
      fontSize: 12
    },
    itemStyle: {
      //地图区域
      areaColor: 'sgray'
    },
    //roam: 'scale', //用户可根据滑轮缩放地图
    zoom: 1.25, //放大或缩小地图
    emphasis: {
      //控制高亮区域：鼠标位置
      label: {
        color: 'black',
        fontSize: 14,
      },
      itemStyle: {
        areaColor: "#83b5e7"
      }
    },

    data: [
      //展示后台数据
    ]
  }]
}


export default {
  name: 'chinaMap',
  mounted() {
    this.get_Data(); 

    //1.初始化
    this.mychart = echarts.init(this.$refs.mapbox);
    //2.添加类
    this.mychart.setOption(option);
  },

  methods:{
    get_Data(){ //使用数据接口获取json数据包
      jsonp('https://gwpre.sina.cn/interface/fymap2020_data.json?_=1590550575291&callback=dataAPIData',
      {}, (err, data) => {
        if(!err){
          //代表请求数据成功
          console.log(data);
          let list = data.data.list.map(item => ({name:item.name, value:item.value}));
          option.series[0].data = list;
          this.mychart.setOption(option); //DOM已经渲染完成才能执行
        }
      })
    },

  //   get_World_Data(){ //此数据接口禁止跨域资源共享，无法获取数据
  //     jsonp('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist',
  //     {}, (err, data) => {
  //       if(!err){
  //         //代表请求数据成功
  //         console.log(data);
  //         let list2 = data.data.map(item => ({name:item.name, value:item.confirm}));
  //         option.series[0].data = list2;
  //         this.mychart.setOption(option); //DOM已经渲染完成才能执行
  //       }
  //     })
  }
}
</script>

<style>
  #center{
    text-align: center;
    margin:0 auto;
    width: 100%;
  }
</style>